<template>
	<div class="car">
		<!-- 购物车列表 -->
		<div class="shopcar">
			<MyCard v-for="item in shopcarList" :key="item.id" :card="item"></MyCard>
		</div>
		<!-- 结算 -->
		<div class="submit">
			<div class="text">
				<p>总计(不含运费)：</p>
				<span>已选择商品 {{ allChecked }} 件，总价 ￥{{ totalPrice }} 元</span>
			</div>
			<van-button type="danger">去结算</van-button>
		</div>
	</div>
</template>

<script>
import MyCard from '@/components/MyCard.vue';
import { getShopcarlist } from '@/apis/index.js';
export default {
	data() {
		return {
			shopcarList: []
		};
	},
	async created() {
		const list = JSON.parse(localStorage.getItem('shopcarList'));
		const arr = list.map(item => item.id);
		// console.log(arr);
		// 改造，加入选中态和真实数量
		this.shopcarList = (await getShopcarlist(arr)).data.message.map(item => ({
			...item,
			checked: false,
			count: list.find(item2 => item2.id === item.id).count
		}));
		// console.log(this.shopcarList);
	},
	components: {
		MyCard
	},
	computed: {
		// 总价
		totalPrice() {
			const arr = this.shopcarList.filter(item => item.checked === true);
			return arr.reduce((sum, item) => sum + item.sell_price * item.count, 0);
		},
		// 选择数量
		allChecked() {
			return this.shopcarList.filter(item => item.checked === true).length;
		}
	}
};
</script>

<style scoped lang="less">
.submit {
	height: 100px;
	background-color: #eeeeee;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	box-sizing: border-box;
	margin-top: 50px;
}
.text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	p {
		font-size: 18px;
		font-weight: bold;
	}
	span {
		font-size: 13px;
	}
}
</style>
